<template>
	<view class="lucky-detail">
		<view class="lucky-detail-specific">
			<view class="lottery-situation">
				<view v-for="(item,index) in lotteryList" :key="index">
					<text>{{item.value}}</text>
					<text>{{item.name}}</text>
				</view>
				<view class="line"></view>
			</view>
			<view>
				不放过每一次获取幸运的机会
			</view>
		</view>
		<view class="lucky-detail-msg">
			<view>
				<view class="earn-expend">
					<view :class="lotteryResultIndex == index?'lottery-active':''" v-for="(item,index) in awardType" :key="index"
					 @click="chooseResult(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view>
				<scroll-view v-if="list.length>=10" scroll-y="true" :style="'height:2980px'" @scrolltolower="loadingMore">
					<view class="lucky-detail-message" v-for="(one,index) in list" :key="index" @click="toDetail(one)">
						<view>
							<image :src="one.img_src" mode="aspectFill"></image>
						</view>
						<view>
							{{one.title}}
						</view>
					<view class="run-lottery">
						<view style="color: #999999;" v-if="one.is_draw==1">
							{{one.lottery_time}}已经开奖
						</view>
						<view v-if="one.is_draw==2&&one.open_type==1">
							{{one.lottery_time}}自动开奖
						</view>
						<view v-if="one.is_draw==2&&one.open_type==2">
							{{one.start_time}}满{{one.quota}}人自动开奖
						</view>
						<view v-if="one.draw_status==1">
							等待开奖
						</view>
						<view style="color: #666666;" v-if="one.draw_status==2">
							已中奖
						</view>
						<view style="color: #999999;" v-if="one.draw_status==3">
							未中奖
						</view>
					</view>
						<view class="gain-award" v-if="one.draw_status==2">
							{{one.reward}}
						</view>
					</view>
				</scroll-view>
				<view v-else class="lucky-detail-message" v-for="(one,index) in list" :key="index" @click="toDetail(one)">
					<view>
						<image :src="one.img_src" mode="aspectFill"></image>
					</view>
					<view>
						{{one.title}}
					</view>
					<view class="run-lottery">
						<view style="color: #999999;" v-if="one.is_draw==1">
							{{one.lottery_time}}已经开奖
						</view>
						<view v-if="one.is_draw==2&&one.open_type==1">
							{{one.lottery_time}}自动开奖
						</view>
						<view v-if="one.is_draw==2&&one.open_type==2">
							{{one.start_time}}满{{one.quota}}人自动开奖
						</view>
						<view v-if="one.draw_status==1">
							等待开奖
						</view>
						<view style="color: #666666;" v-if="one.draw_status==2">
							已中奖
						</view>
						<view style="color: #999999;" v-if="one.draw_status==3">
							未中奖
						</view>
					</view>
					<view class="gain-award" v-if="one.draw_status==2">
						{{one.reward}}
					</view>
				</view>
			</view>
		</view>
		<ending v-if="page>last_page||page==1"></ending>
	</view>
</template>

<script>
	import {
		formatLuckyTime,
		formatMD
	} from '@/common/util.js'
	import ending from '../../../common/ending.vue'
	export default {
		components: {
			ending
		},
		data() {
			return {
				token: this.$store.getters.getToken,
				advanced_lucky: this.$imgUrl + 'img/advanced_lucky.png',
				lotteryList: [{
						name: '等待开奖',
						value: '2'
					},
					{
						name: '中奖记录',
						value: '1'
					},
					{
						name: '全部参与',
						value: '4'
					}
				],
				awardType: ['等待开奖', '中奖记录', '全部参与'],
				lotteryResultIndex: 0,
				list: [],
				last_page: 1,
				page: 1
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			chooseResult(index) {
				this.lotteryResultIndex = index
				this.getData()
			},
			// 获取我的小幸运的记录
			getData() {
				this.page = 1
				this.last_page = 1
				this.list = []
				let data = {
					token: this.token,
					status: parseInt(this.lotteryResultIndex) + 1,
					page: 1
				}
				this.$api.get_mylucky_record(data).then(res => {
					if (res.status) {
						this.lotteryList[0].value = res.data.wait_draw
						this.lotteryList[1].value = res.data.win_record
						this.lotteryList[2].value = res.data.all_involved
						this.list = res.data.data.data
						for (let i = 0; i < this.list.length; i++) {
							this.list[i].lottery_time = formatLuckyTime(this.list[i].lottery_time)
							this.list[i].start_time = formatMD(this.list[i].start_time)
						}
						this.last_page = res.data.data.last_page
					}
					console.log('获取我的小幸运的记录', res)
				}).catch(err => {
					console.log('获取我的小幸运的记录', err)
				})
			},
			toDetail(one) {
				if(one.draw_status!=1) {
					uni.navigateTo({
						url: '../../smallLuckydetail/lotterySituation?id='+one.lucky_id
					})
				}else {
					uni.navigateTo({
						url: '../../smallLuckydetail/luckyJoinDetail?id='+one.lucky_id
					})
				}
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>=this.last_page) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
				}else {
					let data = {
						token: this.token,
						status: parseInt(this.lotteryResultIndex) + 1,
						page: this.page
					}
					this.$api.get_mylucky_record(data).then(res => {
						if (res.status) {
							for (let i = 0; i < res.data.data.data.length; i++) {
								res.data.data.data[i].lottery_time = formatLuckyTime(res.data.data.data[i].lottery_time)
								res.data.data.data[i].start_time = formatMD(res.data.data.data[i].start_time)
							}
							this.list = this.list.concat(res.data.data.data)
						}
						console.log('获取我的小幸运的记录', res)
					}).catch(err => {
						console.log('获取我的小幸运的记录', err)
					})
				}
			}
		}
	}
</script>

<style>
	page {
		position: relative;
		background-color: #F5F6F9;
	}

	.lucky-detail {
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}

	.lucky-detail-specific {
		width: 100%;
		height: 268upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		position: relative;
	}

	.lottery-situation {
		display: flex;
		justify-content: space-between;
		padding-top: 58upx;
		box-sizing: border-box;
	}

	.lottery-situation>view:first-child {
		padding: 0 76upx 0 48upx;
		box-sizing: border-box;
		text-align: center;
	}

	.lottery-situation>view:nth-child(3) {
		padding: 0 46upx 0 76upx;
		box-sizing: border-box;
		text-align: center;
	}

	.lottery-situation>view:nth-child(2) {
		padding: 0 76upx;
		box-sizing: border-box;
		text-align: center;
	}

	.lottery-situation>view>text {
		display: block;
	}

	.lottery-situation>view>text:first-child {
		color: #333333;
		font-size: 36upx;
		line-height: 50upx;
		font-weight: 550;
	}

	.lottery-situation>view>text:last-child {
		color: #999999;
		font-size: 24upx;
	}

	.line {
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		position: absolute;
		top: 78upx;
		left: 250upx;
	}

	.line::before {
		position: absolute;
		content: '';
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		left: 248upx;
	}

	.lucky-detail-specific>view:last-child {
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 25upx;
		font-size: 24upx;
		color: #333333;
		margin-top: 48upx;
	}

	.lucky-detail-msg {
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.lucky-detail-msg>view:first-child {
		padding: 30upx 0;
		box-sizing: border-box;
	}

	.earn-expend {
		width: 100%;
		height: 64upx;
		border-radius: 34upx;
		display: flex;
		justify-content: space-between;
		background: #EFEFEF;
		color: #666666;
		text-align: center;
		font-size: 28upx;
		line-height: 64upx;
	}

	.earn-expend>view {
		width: 344upx;
	}

	.earn-expend .lottery-active {
		background: linear-gradient(to right, #4CCB31, #00B574);
		border-radius: 34upx;
		color: #FFFFFF;
	}

	.lucky-detail-message {
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		border-top: 1upx solid #DEDEDE;
	}

	.lucky-detail-message image {
		width: 100%;
		height: 388upx;
	}

	.lucky-detail-message>view:nth-child(2) {
		margin-top: 20upx;
		color: #333333;
		font-size: 34upx;
	}

	.lucky-detail-message .run-lottery {
		display: flex;
		justify-content: space-between;
		margin-top: 22upx;
	}

	.lucky-detail-message .run-lottery>view:first-child {
		color: #FF3C00;
		font-size: 28upx;
		margin-top: 10upx;
	}

	.lucky-detail-message .run-lottery>view:last-child {
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 30upx;
		color: #00A66A;
		font-size: 30upx;
	}

	.gain-award {
		margin-top: 10upx;
		color: #666666;
		font-size: 28upx;
	}

	.gain-award>text {
		color: #FF5C46;
	}
</style>
